<!DOCTYPE html>

<html>
    <head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <link href="./css/modal.css" rel="stylesheet" type="text/css" />
        <title>Index</title>
    </head>
    <body>
        <div>
            <input type="button" onclick="fadeIn();"  value="模态对话框"/>
        </div>
        <div id="shade" class="modal-backdrop hide">
			<div  class="modal">
				<img src="./images/loading_32.gif"/>
			</div>
		</div>
        <script >
            function fadeIn() {
                document.getElementById('shade').className = 'modal-backdrop';
            }

            function fadeOut() {
                document.getElementById('shade').className = 'modal-backdrop hide';
            }
        </script>
    </body>
</html>
